<template>
  <div>
    <!-- Form -->
    <!-- el-dialog 是弹窗样式，title 绑定弹窗的标题内容，visible 绑定弹窗是否展示 -->
    <el-card class="box-card" title="新增">
      <div slot="header" class="clearfix">
        <span>{{form.id ? '编辑' : '新建'}}</span>
      </div>
      <!-- model 绑定表单对象，rules 绑定表单规则，ref 用来校验规则 -->
      <el-form :model="form" :rules="formRules" ref="form">

        <el-form-item label="学号" :label-width="formLabelWidth" prop="Sid">
          <el-input v-model="form.Sid"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="Sname">
          <el-input v-model="form.Sname"></el-input>
        </el-form-item>
        <el-form-item label="上课时间" :label-width="formLabelWidth" prop="Ctime">
          <el-input v-model="form.Ctime"></el-input>
        </el-form-item>
        <el-form-item label="下课时间" :label-width="formLabelWidth" prop="Xtime">
          <el-input v-model="form.Xtime"></el-input>
        </el-form-item>
        <el-form-item label="教室" :label-width="formLabelWidth" prop="crname">
          <el-input v-model="form.crname"></el-input>
        </el-form-item>
        <el-form-item label="课程" :label-width="formLabelWidth" prop="Couresname">
          <el-input v-model="form.Couresname"></el-input>
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth" prop="Classname">
          <el-input v-model="form.Classname" type="tel"></el-input>
        </el-form-item>
        <el-form-item label="第一次打卡时间" :label-width="formLabelWidth" prop="Firsttime">
          <el-input v-model="form.Firsttime"></el-input>
        </el-form-item>
        <el-form-item label="第二次打卡时间" :label-width="formLabelWidth" prop="SecondTime">
          <el-input v-model="form.SecondTime"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {checkCRnameValidator} from 'utils/validator';
// import tableData from './data';

// 下面是 Vue 组件
export default {
  data() {
    return {
      formLabelWidth: '120px', // 表单 label 的宽度
      form: {}, // 用作表单绑定的内容
      formRules: {
        date: [
          { type: 'string', required: true, message: '请选择日期', trigger: 'blur' }
        ],
        Ctime: [],
        Xtime: [],
        Coursename: [
          { required: true, message: '请输入课程名', trigger: 'blur' },
          { min: 1, max: 15, message: '请输入正确的课程名', trigger: 'blur' }
        ],
        CRname: [
          { required: true, validator: checkCRnameValidator, trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    '$route' () {
      // 对路由变化作出响应...
      this.updateFormItem();
    }
  },
  created: function () {
    this.updateFormItem();
  },
  created() {
    this.getClassroomList();
  },
  methods: {

 getClassroomList() {
      console.log("连接后端");
      this.axios({
        method: "get",
        url: "http://localhost:8080/classroom",
      }).then((res) => {
        this.tableData = res.data;
        console.log("获取数据成功");
      });
    },


    // 获取路由信息，填充
    updateFormItem(){
      const id = this.$route.params.id;
      const formItem = tableData.find(x => x.id === id);
      if(formItem){
        this.form = {...formItem};
      }else{
        this.form = {};
      }
    },
    // 新增/修改一个数据
    updateTableItem(item = {}){
      // 检查是否有 id，有则更新，没有则新增
      if(item.id !== undefined){
        // 更新值
        let itemIndex = tableData.findIndex(x => x.id === item.id);
        if(itemIndex > -1){
          // Vue 中数组更新不能直接使用 array[index] = xxx; 的方式，可以参考https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
          tableData.splice(itemIndex, 1, {...item});
        }
      }else{
        // 添加到列表中，同时自增 id 
        tableData.push({...item, id: tableData.length + 1});
      }
    },
    // 提交新增/修改表单
    submitForm(){
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          // 更新数据信息
          this.updateTableItem(this.form);
          // 跳转回列表页
          this.$router.push({name: 'Service'});
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
